<template>
  <div class="app-container">
    <h4>运输任务管理</h4>
    <el-card shadow="never">
      <el-form ref="headerForm" :model="transportationForm" label-width="110px">
        <el-row :gutter="60">
          <el-col :span="8">
            <el-form-item label="任务编号: " label-width="80px">
              <el-input
                v-model="transportationForm.id"
                clearable
                placeholder="请输入任务编号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务分配状态: ">
              <el-select
                v-model="transportationForm.assignedStatus"
                placeholder="请选择"
                clearable
              >
                <el-option label="已分配" value="2" />
                <el-option label="待人工分配" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="满载状态: ">
              <el-select
                v-model="transportationForm.loadingStatus"
                placeholder="请选择"
                clearable
              >
                <el-option label="满载" value="2" />
                <el-option label="空载" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车牌号码: " label-width="80px">
              <el-input
                v-model="transportationForm.licensePlate"
                clearable
                placeholder="请输入车牌号码"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="起始地机构: ">
              <cy-tree-select v-model="valueStartID" :placeholder="'请选择起始地机构'" filterable :data="options" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="目的地机构: ">
              <cy-tree-select v-model="valueEndID" :placeholder="'请选择目的地机构'" filterable :data="options" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="0">
              <el-button
                class="app_container_search"
                type="primary"
                @click="searchForm"
              >搜索</el-button>&nbsp;
              <el-button
                class="app_container_rest"
                @click="restForm"
              >重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never" class="nav_change">
      <el-tag
        :class="{ active: index === 0 }"
        @click="changeList(0, null)"
      >全部 <b>{{ navTotal }}</b></el-tag>
      <el-tag
        :class="{ active: index === 1 }"
        @click="changeList(1, 1)"
      >待提货 <b>{{ nav_count[1] }}</b></el-tag>
      <el-tag
        :class="{ active: index === 2 }"
        @click="changeList(2, 2)"
      >进行中 <b>{{ nav_count[2] }}</b></el-tag>
      <el-tag
        :class="{ active: index === 3 }"
        @click="changeList(3, 4)"
      >已完成 <b>{{ nav_count[4] }}</b></el-tag>
      <el-tag
        :class="{ active: index === 4 }"
        @click="changeList(4, 5)"
      >已取消 <b>{{ nav_count[5] }}</b></el-tag>
    </el-card>
    <el-card shadow="never" class="app_container_list">
      <el-table
        v-loading="loading"
        :header-cell-style="{ background: '#f8faff' }"
        stripe
        style="width: 100%"
        :data="list"
      >
        <el-table-column width="60" label="序号">
          <template #default="slot">
            {{
              (transportationForm.page - 1) * transportationForm.pageSize +
                slot.$index +
                1
            }}
          </template>
        </el-table-column>
        <el-table-column prop="id" width="180" label="运输任务编号" />
        <el-table-column
          prop="truck.licensePlate"
          width="100"
          label="车牌号码"
        />
        <el-table-column prop="startAgency.name" width="150" label="起始地" />
        <el-table-column prop="endAgency.name" width="170" label="目的地" />
        <el-table-column prop="truck.status" width="120" label="运输任务状态">
          <template #default="{ row }">
            <span>{{
              row.status === 1
                ? "待提货"
                : row.status === 2
                  ? "进行中"
                  : row.status === 3
                    ? "待确认"
                    : row.status === 4
                      ? "已完成"
                      : row.status === 5
                        ? "已取消"
                        : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="loadingStatus" width="120" label="车辆装载状态">
          <template #default="{ row }">
            <span>{{
              row.loadingStatus === 1
                ? "半载"
                : row.loadingStatus === 2
                  ? "满载"
                  : row.loadingStatus === 3
                    ? "空载"
                    : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="assignedStatus" width="120" label="任务分配状态">
          <template #default="{ row }">
            <span>{{
              row.assignedStatus === 1
                ? "未分配"
                : row.assignedStatus === 2
                  ? "已分配"
                  : row.assignedStatus === 3
                    ? "待分配"
                    : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="planDepartureTime"
          width="160"
          label="计划发车时间"
        />
        <el-table-column prop="" width="160" label="实际发车时间" />
        <el-table-column prop="updated" width="160" label="更新时间" />
        <el-table-column width="180" label="操作" fixed="right">
          <template #default="{ row }">
            <el-button
              type="text"
              style="color: #419eff"
              @click="
                $router.push(
                  `/transport/task-detail?id=${row.id}&type=运输管理`
                )
              "
            >查看</el-button>
            <el-button
              type="text"
              :disabled="
                (row.status !== 1 && row.loadingStatus !== 3) ||
                  row.status !== 1 ||
                  row.loadingStatus !== 3
              "
              @click="Cancel(row.id)"
            >取消</el-button>
            <el-button
              v-if="row.status !== 1"
              disabled
              type="text"
            >手动调整</el-button>
            <button
              v-else
              style="
                border: 0;
                color: #419eff;
                background-color: transparent;
                cursor: pointer;
              "
              @click="adjust(row.transportLineId, row.id)"
            >
              手动调整
            </button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="transportationForm.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size.sync="transportationForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <Footer />
    <el-dialog
      v-loading="loading"
      title="手动调整"
      :visible.sync="dialogTableVisible"
      width="35%"
      @close="fnCancel"
    >
      <el-form ref="dialogForm" :model="dialogForm" label-width="100px">
        <el-form-item label="任务编号: ">
          <el-input v-model="dialogForm.id" :readonly="true" />
        </el-form-item>
        <el-form-item label="运单数量: ">
          <el-input :readonly="true" />
        </el-form-item>
        <el-form-item label="选择车次: ">
          <el-select
            v-model="dialogForm.transportTripsId"
            filterable
            clearable
            placeholder="请选择"
            @clear="getCarBind(dialogForm.transportTripsId)"
            @change="getCarBind(dialogForm.transportTripsId)"
          >
            <el-option
              v-for="item in TripsList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择车辆: ">
          <el-select
            v-model="dialogForm.truckId"
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in carBindList"
              :key="item.id"
              :label="item.licensePlate"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="fnOK">确 定</el-button>
        <el-button @click="fnCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  CancelItem,
  getList,
  getCount,
  getCarList,
  getCarBind,
  manualItem
} from '@/api/transport'
import { getDepartTree } from '@/api/base'
export default {

  data() {
    return {
      list: [], // 获取的全部数据列表
      nav_count: {}, // 请求的数据类型总数
      transportationForm: {
        // 初始请求参数
        assignedStatus: '',
        endAgencyId: null,
        id: '',
        licensePlate: '',
        loadingStatus: '',
        page: 1,
        pageSize: 10,
        planArrivalTime: '',
        startAgencyId: null,
        status: null,
        truckId: ''
      },
      dialogForm: {
        // 手动调整的表单数据
        transportTripsId: '',
        id: '',
        truckId: ''
      },
      options: [],
      TripsList: [],
      carBindList: [],
      index: 0, // 高亮索引
      total: 0, // 总页数
      counts: 0, // 总条数
      loading: false, // 加载状态
      dialogTableVisible: false, // 手动调整弹框的显示隐藏
      valueStartID: '',
      valueEndID: ''
    }
  },
  computed: {
    navTotal() {
      return (
        +this.nav_count[1] +
          +this.nav_count[2] +
          +this.nav_count[3] +
          +this.nav_count[4] +
          +this.nav_count[5] || ''
      )
    }
  },
  async created() {
    const res = await getCount()
    this.nav_count = res
    this.getCarBind()
    this.getTree()
    this.getList()
  },
  methods: {
    // 初始化列表数据
    async getTree() {
      const res = await getDepartTree()
      this.options = JSON.parse(res)
    },
    async getList() {
      this.loading = true
      const res = await getList(this.transportationForm)
      this.list = res.items
      this.total = +res.pages
      this.counts = +res.counts
      this.loading = false
    },
    // 改变每页显示条数
    handleSizeChange(val) {
      this.transportationForm.pageSize = val
      this.getList()
    },
    // 改变页码
    handleCurrentChange(val) {
      this.transportationForm.page = val
      this.getList()
    },
    // 点击高亮切换以及分类列表
    async changeList(index, status) {
      this.index = index
      this.transportationForm.status = status
      await this.getList()
    },
    // 重置头部搜索表单
    restForm() {
      this.$refs.headerForm.resetFields()
      this.transportationForm = {
        assignedStatus: '',
        endAgencyId: null,
        id: '',
        licensePlate: '',
        loadingStatus: '',
        page: 1,
        pageSize: 10,
        planArrivalTime: '',
        startAgencyId: null,
        status: null,
        truckId: ''
      }
      this.valueStartID = ''
      this.valueEndID = ''
      this.getList()
    },
    // 点击搜索渲染
    async searchForm() {
      this.transportationForm.startAgencyId = this.valueStartID
      this.transportationForm.endAgencyId = this.valueEndID
      await this.getList()
    },
    // 取消逻辑
    async Cancel(id) {
      await this.$confirm('确认取消此运输任务吗？')
      await CancelItem(id)
      this.$message.success('取消成功')
      this.getList()
    },
    // 获取车辆列表
    async getCarBind(id = '') {
      if (id) {
        const data = { transportTripsId: id }
        const res = await getCarBind(data)
        this.carBindList = res
      } else {
        const res = await getCarBind()
        this.carBindList = res
      }
    },
    // 手动调整
    async adjust(transportLineId, id) {
      this.dialogTableVisible = true
      this.dialogForm.id = id
      const data = { transportLineId: transportLineId }
      const res = await getCarList(data)
      this.TripsList = res
    },
    // 手动调整点击确定逻辑
    async fnOK() {
      this.loading = true
      await manualItem(this.dialogForm)
      this.$message.success('调整成功')
      this.getList()
      this.dialogTableVisible = false
      this.loading = false
    },
    // 手动调整点击取消逻辑
    fnCancel() {
      this.$refs.dialogForm.resetFields()
      this.dialogForm = {
        transportTripsId: '',
        id: '',
        truckId: ''
      }
      this.getCarBind()
      this.dialogTableVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  padding-bottom: 0;
  .el-card {
    width: 100%;
    ::v-deep .el-card__body {
      padding-left: 0;
      .el-row {
        margin: 0 !important;
        .el-col {
          height: 40px;
          margin-bottom: 20px;
          &:last-child {
            margin-bottom: 0;
          }
          .el-form-item__label {
            font-weight: normal;
          }
          .el-select {
            width: 100%;
          }
          .el-button {
            width: 90px;
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            padding: 10px 20px !important;
            border-radius: 5px !important;
            font-weight: 400;
          }
          .app_container_search {
            height: 40px;
          }
          .app_container_rest {
            margin-left: 12px;
          }
        }
      }
    }
  }
  .nav_change {
    margin-top: 20px;
    margin-bottom: 20px;
    height: 48px;
    ::v-deep .el-card__body {
      padding: 0;
      .el-tag {
        padding: 0;
        height: 48px;
        width: 120px;
        line-height: 48px;
        text-align: center;
        background-color: #fff;
        color: #333;
        font-size: 14px;
        cursor: pointer;
        border: 0;
      }
    }
  }
  .active {
    background-color: #ffeeeb !important;
    color: #e15536 !important;
  }
  .app_container_list {
    padding: 28px;
    padding-bottom: 0;
    text-align: center;
    ::v-deep .el-card__body {
      padding-bottom: 0;
      padding-top: 0;
      .el-table {
        border: 1px solid #ebeef5;
      }
    }
    :deep(.el-table__body-wrapper) {
      &::-webkit-scrollbar {
        background-color: transparent;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        border: 4px solid #fff;
        background-color: #dddee0;
      }
    }
    ::v-deep .cell {
      text-align: center;
    }
    .el-pagination {
      margin-top: 20px;
      padding-bottom: 40px;
    }
  }
  ::v-deep .el-dialog {
    border-radius: 8px;
    background: #fff;
    .el-dialog__header {
      padding: 15px 30px;
      border-radius: 8px 8px 0 0;
      background-color: #f3f4f7;
      .el-dialog__title {
        font-size: 18px;
        font-weight: 400;
        color: #20232a;
      }
    }
    .el-dialog__body {
      padding: 40px 60px 0 40px;
      .el-form-item__label {
        font-weight: normal;
      }
      .el-select {
        width: 100%;
      }
    }
    .el-dialog__footer {
      padding: 14px 30px 38px !important;
      .dialog-footer {
        width: 100%;
        text-align: center;
        .el-button {
          width: 90px;
          margin-left: 15px;
        }
      }
    }
  }
}
</style>
